<template>
    <div class="promotion">
      <div class="cell" v-if="couponData.length > 0" @click="$router.push({path: '/couponList', query: {a: 'goods', goods_id: goods.goods_id, seller_id: goods.seller_id, title: '商品优惠券'}})">
        <div class="left">
          领券
        </div>
        <div class="center">
          <span class="item coupon" v-for="(item,index) in couponData" :key="index">{{item.coupon_namedesc}}</span>
        </div>
        <div class="right">
          <i class="more-icon"></i>
        </div>
      </div>

      <div class="cell multiCell" v-if="packageData.length > 0" @click="packageShow">
        <div class="left">
          套餐
        </div>
        <div class="center">
          <div class="item package" v-for="(item,index) in packageData" :key="index">
            <packageTag class="tag" :data="item"></packageTag>{{item.package_title}}
          </div>
        </div>
        <div class="right">
          <i class="more-icon"></i>
        </div>
      </div>

      <div class="cell multiCell" v-if="activityData.length > 0">
        <div class="left">
          促销
        </div>
        <div class="center">
          <div class="item" v-for="(item,index) in activityData" :key="index">
            <span><i>{{item.activity_tag}}</i>{{item.activity_title}}</span>
          </div>
        </div>
        <div class="right">
          <i class="more-icon"></i>
        </div>
      </div>
    </div>

</template>

<script>
import packageTag from '@comps/tag/packageTag'
export default {
  components: {
    packageTag
  },
  props: {
    goods: {
      type: Object
    },
    couponData: {
      type: Array
    },
    packageData: {
      type: Array
    },
    activityData: {
      type: Array
    }
  },
  methods: {
    couponShow () {
      this.$emit('couponShow')
    },
    packageShow () {
      this.$emit('packageShow')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/pub";

  .promotion {
    margin-top: .25rem;
    padding: 0 .25rem;
    width: 100%;
    background-color: #fff;

    .cell {
      padding: 0;
      display: flex;
      height: $default_cell_height;
      line-height: $default_cell_height;
      font-size: $default_middlefont_size;
      color: $default_subtitle_color;
      &:not(:last-child) {
        border-bottom:  .0125rem solid $default_border_color;
      }
      .left {

        text-align: left;
      }
      .center {
        text-align: left;
        flex: 0 1 calc(100% - 1.5rem);
        overflow: hidden;
        .item {
          &.coupon {
            color: #fff;
            margin: 0 .25rem 0 .25rem;
            padding: 0 .25rem 0 .125rem;
            background-color: #e4393c;
            position: relative;
            display: inline-block;

            line-height: .45rem;
            &:before {
              content: "";
              position: absolute;

              left: -.2rem;

              background-image: url(http://img.zanjl.com/Content/img/image/coupon_side@2x.png);

              background-repeat: no-repeat;
            }
            &:after {
              content: "";
              position: absolute;

              left: calc(100% - .25rem);

              background-image: url(http://img.zanjl.com/Content/img/image/coupon_side@2x.png);

              background-repeat: no-repeat;
            }
          }
          &.package {
            width: 100%;
            color: $default_title_color;
            .tag {
              line-height: $default_bigfont_size;
            }
          }
        }
      }
      .right {

        text-align: right;
      }
    }
    .multiCell {
      height: auto;
      .item {

        &:last-child {
          margin-bottom: .25rem;
        }
        &:nth-last-child(1):first-child {
          margin-bottom: 0;
        }
      }
    }
  }
</style>
